<template>
  <div :class="$style.wrapper">
    <img
      :src="goodsSpecial.headerImg"
      v-if="goodsSpecial.headerImg"
      class="img-block"
      v-analytics.click="{
        action: 'Special Subject Banner Click',
        category: category,
        label: goodsSpecial.headerUrl,
        callback: goToWeb,
      }"
    >
    <div :class="$style.box">
      <div
        v-for="info in goodsSpecial.goodsInfos"
        :class="$style.item"
      >
        <img
          :src="info.g_pic_url"
          :class="$style.cover"
          @click="goToGoodsDetail(info.g_id)"
          v-analytics.click="{
            action: 'Special Subject Goods Click',
            category: category,
            label: info.g_id,
          }"
        />
        <div :class="$style.desc">
          <p :class="$style.tip">
            First Order Price
          </p>
          <p :class="$style.couponPrice">
            <span>{{info.couponPrice}}</span>
          </p>
        </div>
      </div>
      <div :class="$style.item">
        <button
          class="v-button"
          :class="$style.button"
          v-analytics.click="{
            action: 'Special Subject See All',
            category: category,
            label: goodsSpecial.headerUrl,
            callback: goToWeb,
          }"
        >
          See More
        </button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GoodsSpecial',
  props: {
    goodsSpecial: Object,
    category: String,
  },
  methods: {
    goToWeb() {
      const { headerUrl } = this.goodsSpecial
      location.href = headerUrl
    },
    goToGoodsDetail(goodsId) {
      this.$router.push({
        path: '/goodsInfo',
        query: { goodsId },
      })
    },
  },
}
</script>

<style module lang="scss">
  .box {
    width: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 8px;
    padding-left: 8px;
    height: 146px;
    margin-bottom: 4px;
    white-space: nowrap;
  }

  .item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 92px;
    height: 100%;
    margin-right: 8px;
  }

  .cover {
    display: block;
    width: 92px;
    height: 92px;
  }

  .desc {
    background-color: #fff;
  }

  .discountPrice {
    font-size: 12px;
    padding-top: 6px;
    text-align: center;
  }

  .couponPrice {
    text-align: center;
    font-size: 14px;
    padding: 4px 0 6px;
  }

  .tip {
    padding-top: 6px;
    color: #FF464E;
    font-size: 10px;
    text-align: center;
  }

  .button {
    margin-top: 46px;
    width: 88px;
    height: 30px;
    font-size: 12px;
    border-color: #979797;
    border-radius: 1000px;
    &:active {
      background-color: #DFDFDF;
    }
  }
</style>
